<!-- 夜巡添加 -->
<template>
  <div>
    <el-dialog v-model="dialogVisible" title="新增夜巡" width="500" :before-close="handleClose">
      <div>
        <el-form ref="ruleFormRef" style="max-width: 300px" :model="ruleForm" :rules="rules" label-width="auto"
          class="demo-ruleForm" status-icon>
          <el-form-item label="巡检地点:" prop="address">
            <el-select v-model="ruleForm.address" placeholder="请选择巡检地点" clearable>
              <el-option v-for="item in list" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="巡检状态:" prop="state">
            <el-select v-model="ruleForm.state" placeholder="请选择巡检状态" clearable>
              <el-option label="正常" value="正常" />
              <el-option label="异常" value="异常" />
              <el-option label="未巡查" value="未巡查" />
            </el-select>
          </el-form-item>
          <el-form-item label="巡检记录:" prop="comment">
            <el-input v-model="ruleForm.comment" placeholder="请输入巡检记录" clearable />
          </el-form-item>
        </el-form>

      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { patrolAdd } from '@/api/care/night/night'
import { nightAddParams } from '@/api/care/night/type'
import { addressList } from '@/api/care/address/address';
import { addressListData } from '@/api/care/address/type';

const dialogVisible = ref(true)

const ruleForm = reactive<nightAddParams>({
  address: '',
  state: '',
  comment: ''
})

// 地址列表
const list = ref<addressListData[]>([])
const getAddressList = async () => {
  let res = await addressList({ page: 1, pageSize: 10000 })
  list.value = res.list
}

// 添加
const submitForm = async () => {
  await patrolAdd(ruleForm)
  // console.log('添加', res);
  ElMessage.success('添加成功')
  emit('close')
}
const submit = () => {
  ruleFormRef.value?.validate(async (valid) => {
    if (valid) {
      submitForm()
    }
  });
}

// 表单校验
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<nightAddParams>>({
  address: [
    { required: true, message: '请选择巡查地点', trigger: 'change' },
  ],
  state: [
    { required: true, message: '请选择巡查状态', trigger: 'change', },
  ],
  comment: [
    { required: true, message: '请输入巡查记录', trigger: 'blur' },
  ],
})

const emit = defineEmits(['close'])
const handleClose = () => {
  emit('close')
}

onMounted(() => {
  getAddressList()
})
</script>

<style scoped lang="less"></style>
